<template>
  <div>
    <div class="container ">
      <!-- 投资合作 -->
      <div class="investment main">
        <div class="stment">
          <div class="form-group row ">
            <div class="col-sm-10 stment_search">
              <input
                type="email"
                class="form-control"
                id="inputEmail3"
                placeholder="请输入关键字"
              />
            </div>
            <div class="col-sm-2">
              <button class="btn btn-primary" type="button" @click="search" >搜索</button>
            </div>
          </div>
          <div class="neighboor In clearfix">
            <span>投资邻域：</span>
            <ul>
              <li
                class="text-center"
                v-for="(item,index) in instmentD"
                :class="{'typeactive':instmentcur === index}"
                @click="instmentItme(item,index)"
              >
                {{ item.value }}
              </li>
            </ul>
          </div>
          <div class="neighboor">
            <span>类&#x3000;&#x3000;型：</span>
            <ul>
              <li
                class="text-center"
                v-for="(item,index) in typeD"
                :class="{'typeactive':typecur === index}"
                @click="typeItme(item,index)"
              >
                {{ item.value }}
              </li>
            </ul>
          </div>
          <p class="">共2000条</p>
          <!--  -->
          <div class="confidence hot_BJ " v-for="item in idenceData">
            <div class="confidence_img"><img :src="item.img" alt="" /></div>
            <div class="confidence_text">
              <h6>{{ item.title }}</h6>
              <p class="main_text">{{ item.text }}</p>
              <p class="understand text-right"><a href="javascript:;" @click="particulars">[了解详情 ]</a></p>
              <div class="quaintance clearfix">
                <span>主头邻域：</span>
                <ul>
                  <li v-for="item in item.top">{{ item }}</li>
                </ul>
              </div>
            </div>
            <div class="selbtn">
              <button
                type="button"
                class="btn btn-default btn-lg btn-block advisor"
              >
                创业导师
              </button>
              <button
                type="button"
                class="btn btn-default btn-lg btn-block undertaking"
              >
                在线咨询
              </button>
            </div>
          </div>
        </div>
        <!--分页-->
        <pagination :msg="page" @refreshList="onRefresList"></pagination>
      </div>
    </div>
  </div>
</template>

<script>
  import pagination from '../../views/localPage/pagination'
  export default {
    name: "InvestmentCooperation",
    components:{pagination},
    data(){
      return{
        page:{
          pagesize:4,
          total:900,
        },
        instmentcur: 0,
        typecur: 0,
        timecur: 0,
        hotcur: 0,
        instmentD: [
          { value: "纳米技术" },
          { value: "人工智能" },
          { value: "互联网" }
        ],
        typeD: [{ value: "投资人" }, { value: "投资机构" }],
        idenceData: [
          {
            img: "../../../static/images/tz_img.png",
            title: "常志钊",
            text:
              "材料充分的情况下，分的情况下，需根据户情况而定",
            top: [" 现代装逼与先进制造", "现代服务业"]
          },
          {
            img: "../../../static/images/tz_img.png",
            title: "常志钊",
            text:
              "材料充分的情况下，咨询周期1-5个月，认证周期1.5个月,复审1个月，具体需根据客户情况而定具体需根据客户情况而定具体需根据客户情况而定具体需根据客户情况而定",
            top: [" 现代装逼与先进制造", "现代服务业"]
          },
          {
            img: "../../../static/images/tz_img.png",
            title: "常志钊",
            text:
              "材料充分的情况下，咨询周期1-5个月，认证周期1.5个月,复审1个月，具体需根据客户情况而料充分的情况下，咨询周期1-5个月，认证周期1.5个月,复审1个月，具体需根据客户情况而料充分的情况下，咨询周期1-5个月，认证周期1.5个月,复审1个月，具体需根据客户情况而料充分的情况下，咨询周期1-5个月，认证周期1.5个月,复审1个月，具体需根据客户情况而定具体需根据客户情况而定具体需根据客户情况而定具体需根据客户情况而定",
            top: [" 现代装逼与先进制造", "现代服务业"]
          },
          {
            img: "../../../static/images/tz_img.png",
            title: "常志钊",
            text:
              "材料充分的情况下，咨询周期1-5个月，认证周期1.5个月,复审1个月，具体需根据客户情况而定具体需根据客户情况而定具体需根据客户情况而定具体需根据客户情况而定",
            top: [" 现代装逼与先进制造", "现代服务业"]
          },
          {
            img: "../../../static/images/tz_img.png",
            title: "常志钊",
            text:
              "材料充分的情况下，咨询周期1-5个月，认证周期1.5个月,复审1个月，具体需根据客户情况而定具体需根据客户情况而定具体需根据客户情况而定具体需根据客户情况而定",
            top: [" 现代装逼与先进制造", "现代服务业"]
          },
          {
            img: "../../../static/images/tz_img.png",
            title: "常志钊",
            text:
              "材料充分的情况下，咨询周期1-5个月，认证周期1.5个月,复审1个月，具体需根据客户情况而定具体需根据客户情况而定具体需根据客户情况而定具体需根据客户情况而定",
            top: [" 现代装逼与先进制造", "现代服务业"]
          }
        ],

        signD: [
          {
            img: "../../../static/images/hd_p1.png",
            title: "债权路演对接会（第二期）",
            read: 473,
            time: "2019-04-09",
            hdtime: " 2019-04-24 14:00  ~  17:00",
            hdaddress: "江苏省-苏州市-工业园区",
            tense: "报名中",
            Endtense:""
          },
          {
            img: "../../../static/images/hd_p3.png",
            title: "债权路演对接会（第二期）",
            read: 473,
            time: "2019-04-09",
            hdtime: " 2019-04-24 14:00  ~  17:00",
            hdaddress: "江苏省-苏州市-工业园区",
            tense:"",
            Endtense: "截止报名"
          },
          {
            img: "../../../static/images/hd_p4.png",
            title: "债权路演对接会（第二期）",
            read: 473,
            time: "2019-04-09",
            hdtime: " 2019-04-24 14:00  ~  17:00",
            hdaddress: "江苏省-苏州市-工业园区",
            tense: "报名中",
            Endtense:""
          },
          {
            img: "../../../static/images/hd_p5.png",
            title: "债权路演对接会（第二期）",
            read: 473,
            time: "2019-04-09",
            hdtime: " 2019-04-24 14:00  ~  17:00",
            hdaddress: "江苏省-苏州市-工业园区",
            tense: "报名中",
            Endtense:""
          }
        ],
      }
    },
    methods: {

      // 了解详情
      particulars(){
        this.$router.push({ name: 'InvestmentCooperationDetail'})
      },
      // 搜索邻域：        不限
      search: function() {},

      // 主投邻域
      neigItme(item, index) {
        this.neigcur = index;
      },
      // 投资邻域
      instmentItme(item, index) {
        this.instmentcur = index;
      },
      // 类型
      typeItme(item, index) {
        this.typecur = index;
      },
      onRefresList(val){
        console.log(val)
      }

    }
  }
</script>
<style scoped>
.investment{
  padding: 10px 20px ;
}
.investment .stment{padding-top: 60px;}
.stment_search{
  margin-bottom: 40px;
  padding-left:60px;
}
.neighboor {
  margin-bottom: 10px;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -ms-flex-line-pack: center;
  align-content: center;
  height: 50px;
}
.neighboor span {
  margin-right: 40px;
  color: #666;
  font-size: 16px;
}
.neighboor ul li {
  float: left;
  width: 120px;
  height: 32px;
  line-height: 32px;
  margin-right: 20px;
  color: #666;
}

.neighboor .typeactive{color: #1575f9;}
.confidence{
  height: 200px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding :0 50px 0 10px;
  margin-bottom: 30px;
}
.confidence .confidence_img{
  width: 184px;
  height: 122px;
  margin-right: 20px;
}
.confidence .confidence_img img{
  width: 100%;height: 100%;
}
.confidence .selbtn{
  width: 200px;
  padding-left: 20px;
}
.confidence .confidence_text{
  width: calc(100% - 200px);
  /* border: 1px solid red; */
  height: 122px;
  padding-left: 10px;
}
.confidence .confidence_text p{
  margin: 0;font-size: 16px;
  color: #666666;
}
.confidence .confidence_text h6{
  font-weight: 600;
  font-size: 20px;
}
.confidence .confidence_text .quaintance {
  display: flex;justify-content: flex-start;
}
.confidence .confidence_text .quaintance li{
  float: left;
  height: 32px;
  padding:0 10px;
  background-color: #e7e7e7;
  margin-right: 20px;
  line-height: 32px;
}
.selbtn .advisor{
  background-image: linear-gradient(0deg,
  #ef690d 0%,
  #f0a21f 100%),
  linear-gradient(
    #0060ff,
    #0060ff);
  background-blend-mode: normal,
  normal;
  box-shadow: 0px 2px 8px 0px
  rgba(0, 0, 0, 0.15);
  border-radius: 2px;
}
.selbtn .undertaking{
  background-color: white;
  border: solid 1px #379aff;
}
  .main_text{
    height: 50px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

</style>


